<template>
<div>
<!--  快速登记  -->
<!--  <el-page-header @back="goBack" title="行政" content="快速登记" ></el-page-header>-->

  <!--  分割线  -->
<!--  <el-divider></el-divider>-->

  <el-tabs  v-model="activeName" @tab-click="handleClick" >
    <el-tab-pane label="收件管理" name="shoujian">

      <!--    高级查询-->

        <el-form :inline="true" :model="admExpressageFormSJ" >
          <el-row>
          <el-col :span="2.5">
            <el-form-item>
              <el-input v-model="admExpressageFormSJ.LyOrFj" placeholder="收件人/领件人"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="2.5">
            <el-form-item>
          <el-select v-model="admExpressageFormSJ.expressageSendWaayId" clearable placeholder="选择快递公司">
            <el-option
                v-for="sw in sendWaayData"
                :key="sw.id"
                :label="sw.sendName"
                :value="sw.id">
            </el-option>
          </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="2.5">
            <el-form-item>
              <el-select v-model="admExpressageFormSJ.expressageExpressTypeId" clearable placeholder="选择快件类型">
                <el-option
                    v-for="et in expressTypeData"
                    :key="et.id"
                    :label="et.expressName"
                    :value="et.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="2.5">
            <el-form-item>
              <el-select v-model="admExpressageFormSJ.takestatus" clearable placeholder="选择领用状态">
<!--                <el-option label="领用状态" value=""></el-option>-->
                <el-option label="未领用" value="1"></el-option>
                <el-option label="已领用" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="日期:">
              <el-date-picker
                  v-model="admExpressageFormSJ.StartDate"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
              至
              <el-date-picker
                  v-model="admExpressageFormSJ.EndDate"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

          </el-col>
      </el-row>

          <el-row>
          <el-col :span="2">
            <el-form-item>
              <el-select v-model="admExpressageFormSJ.queryType" clearable>
                <el-option label="根据收件日期" value="s"></el-option>
                <el-option label="根据领件日期" value="l"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" plain @click="queryAdmExpressageSJ" icon="el-icon-search">检索</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item>
            <el-button type="primary" plain @click="addAdmExpressageSJ" icon="el-icon-search">添加收件</el-button>
            </el-form-item>
          </el-col>
          </el-row>
        </el-form>



      <el-table
          :data="admExpressageDataSJ"
          style="width: 100%">
        <el-table-column
            prop="systemUserRecipients"
            label="收件人"
            width="180">
        </el-table-column>
        <el-table-column
            prop="expressageDateofreceipt"
            label="收件日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="caseNo"
            label="案号">
        </el-table-column>
        <el-table-column
            prop="sendName"
            label="快递公司">
        </el-table-column>
        <el-table-column
            prop="expressName"
            label="快递类型">
        </el-table-column>
        <el-table-column
            prop="expressFee"
            label="快递费">
        </el-table-column>

        <el-table-column
            prop="collarPerson"
            label="领件人">
        </el-table-column>

        <el-table-column
            prop="takestatus"
            label="领件状态"
            :formatter="takestatusZH">
        </el-table-column>

        <el-table-column
            prop="expressageBringDate"
            label="领件时间">
        </el-table-column>

        <el-table-column
            prop="expressageRemark"
            label="备注说明">
        </el-table-column>



        <el-table-column
            fixed="right"
            label="操作">

          <template slot-scope="scope">

            <el-dropdown placement="bottom" trigger="click">
              <el-button type="text" size="small">操作</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  @click.native="queryExpressage(scope.row)">查看</el-dropdown-item>
                <el-dropdown-item  @click.native="delExpressage(scope.row)">删除</el-dropdown-item>
                <el-dropdown-item  @click.native="updateExpressage(scope.row)">修改</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </template>

        </el-table-column>

      </el-table>

      <el-pagination
          @size-change="handleSizeSJChange"
          @current-change="handleCurrentSJChange"
          :page-sizes="[2, 4, 6, 8]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageSJData.total">
      </el-pagination>



    </el-tab-pane>

    <el-tab-pane label="发件管理" name="fajian">
这是发件
    </el-tab-pane>

</el-tabs>
</div>
</template>

<script>
export default {
  name: "AdmExpressage",
  data(){
    return{
      pageSJData:{}, //收件分页数据
      expressTypeData:[], // 快件类型
      sendWaayData:[], // 快递公司
      activeName:"shoujian",
      admExpressageDataSJ:[], // 收件表数据
      admExpressageDataFJ:[], // 发件表数据
      admExpressageFormSJ:{
        queryType:"s",
        kuaiType:"shou",// 代表这是收件查询
        pageSize:'2',
        pageCur:"1",

      },
      admExpressageFormFJ:{ // 发件表单
        kuaiType:"fa", // 代表发件
        pageSize:'2',// 每页显示多少条
        pageCur:"1", // 显示哪页

      }, // 发件表单数据
    }
  },
  created() {
this.queryAdmExpressageSJ()
this.queryExpressType()
    this.querySendWaay()
  },
  methods:{
    goBack(){ this.$router.go(-1) },
    handleClick(){},
    queryAdmExpressageSJ(){// 收件查询

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });


      this.$http.get("admExpressage" ,{params:this.admExpressageFormSJ})
      .then(res => {
        setTimeout(() => {
          loading.close();
        });

        this.admExpressageDataSJ = res.data.data.list
        this.pageSJData = res.data.data
      })
      .catch()
    },
    addAdmExpressageSJ(){// 添加收件
this.$router.push({name:'addadmexpressagesj'})

    },
    queryExpressType(){ // 查询快件类型

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });


      this.$http.get("expressType")
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.expressTypeData= res.data.data
      })
      .catch()
    },
    querySendWaay(){ // 查询快件类型

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("sendWaay")
          .then(res => {
            setTimeout(() => {
              loading.close();
            });
            this.sendWaayData= res.data.data
          })
          .catch()
    },
    takestatusZH(row){
      return row.takestatus=='1'?'未领用':'已领用';
    },
    handleSizeSJChange(val){
      this.admExpressageFormSJ.pageSize=val
      this.queryAdmExpressageSJ();
    },
    handleCurrentSJChange(val){
      this.admExpressageFormSJ.pageCur=val
      this.queryAdmExpressageSJ()

    },
    queryExpressage(row){ // 收件查看详情
this.$router.push({name:'sjview',params:{id:row.id}})

    },
    updateExpressage(row){
      this.$router.push({name:'addadmexpressagesj',params:{id:row.id}})
    },

  }
}
</script>

<style scoped>

.el-divider{
  margin-top: 10px ;
  margin-bottom: 15px ;
  height: 2px;
}

</style>